[Android] 基本的なアニメーションで作りにくいアニメーションの作り方

[Android] 基本的なアニメーションで作りにくいアニメーションの作り方

Clock Icon2018.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

まえがき

いつもはKotlinネタですが、今日はAndroid小ネタです。

Androidアニメーション作る時、ScaleAnimationだったり、RotateAnimationだったり、基本的なアニメーションを組み合わせてAnimationSetとかで、作るわけです。

基本的なアニメーションの組み合わせで難しい場合、ValueAnimatorを使うと自前でタイマーや加速度せず比較的簡単作れちゃいます。

例えば、色のアニメーションやスロットアプリのようなリールアニメーションを基本的な移動、拡大、透過のアニメーションで作ろうとするとしんどいですよね?

ValueAnimator

オレンジから青にグラデーションしながら1秒で切り替わるようにつくってみよう。

    fun colorAnimation(view: View, fromColor: Int, toColor: Int) =
            ValueAnimator.ofFloat(0f, 1f).apply {
                duration = 1000
                addUpdateListener {
                    val animatedReverseFraction = 1 - it.animatedFraction
                    val color = Color.rgb(
                            (fromColor.red * animatedReverseFraction + toColor.red * it.animatedFraction).toInt(),
                            (fromColor.green * animatedReverseFraction + toColor.green * it.animatedFraction).toInt(),
                            (fromColor.blue * animatedReverseFraction + toColor.blue * it.animatedFraction).toInt()
                    )
                    view.setBackgroundColor(color)

                }
                start()
            }

    val Int.red get() = Color.red(this)
    val Int.blue get() = Color.blue(this)
    val Int.green get() = Color.green(this)

ポイントは、0fから1fに値を1000msで変化させています。値の変化だけなので好きにアニメーション作りたい放題です!これで加速度、タイマーを自前で作らないでよくなります。

addUpdateListenerで値が変化しときの処理を書きます。どのくらいで呼ばれているかチェックするとわかるですが、16~17msで呼ばれているみたいですので、60fpsでアニメーションを作ることができます。簡単ですね。

色のグラデーションの計算は、中間色をとる感じの計算になります。

RGBの各要素を取得するの面倒だったので、ついでに拡張プロパティを作りました。

まとめ

加速度も簡単に設定できるので、覚えておくと何かと役にたつかも!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.